User blog:ZodiaDragon/I learned how to make a custom Table of Contents and here's how you can do it too
Okay so if you're a fan of coded pages, you're probably aware that the table of contents box looks unbelievably ugly on top of coding. If you have a coded OC, you probably have the tag somewhere on the page, right? Okay, well I made one that isn't quite as bad. And it functions the same way. I have two examples for you. I stuck one on Whiplash's page on this wiki (though that's an early draft and not the final version for it), and I have one in my Sandbox (the better version, but still not final). Go ahead and look over those two pages to see those examples. And I'll post the code here for you all. Contents (or other title) Section 1 Section 2 So let's cover this while it's sitting here. I'll just go down the list to tell you what is required and what isn't. First off, the first div tag is the box for the entire table of contents. In the style section, I applied "width: 150px," but it can be whatever width you want. If you leave it empty, it takes up the whole page. Giving it the class and IDs of "toc" gives any unlisted style changes that is default from the table of contents. Next up, the second div tag is your title. While not required, you could always add a small 1px border below it to separate it. Make sure to close this one (don't add a line after the word "contents" because that creates a space). Next, an ol tag. OL, as you may guess, stands for "ordered list," which is a list labeled with numbers. Next is the li tag. These are list items. These have a class of "toclevel-1," but it is probably not required (but "toclevel-1" is the only class in the table of contents list, so don't try to add "toclevel-2" because it is not a thing). You'll probably want one of these for every section on your page. So follow the above format for adding new ones. Here it is again if you want it. (SECTION NAME) Fill in (PAGE NAME) with the name of your page (obviously), and fill in (SECTION NAME) with the name of the section you want to link to. The # between them is required, as it links directly to the section (Based on Wikia URLs, notice that the url changes when you click a button on a table of contents). Put each of these li tags on a separate line, and always close them afterwards. Lastly, you need to finish closing your tags. Close the ol and first div tags here. You can do this on the same line as your last list item. Use to close it cleanly. The final piece of the puzzle is disabling the default table of contents. This means that you need to add to the end of your page. This will not disable your custom TOC. And there you have it. A custom table of contents for you to enjoy. As a quick note, you can't collapse these without making it the MediaWiki collapsible box. And as a fair warning, you may need to change some text elements on the page around the box, but other than that, it should be fine. Bye now. -Zod Category:Blog posts